<template>
  <div class="event">
    <div class="event-topbar">
      <div :class="['event-topbar-position-number', eventTopbarPositionNumber]">{{ position.current }}</div>
      <div class="event-topbar-position-name">{{ position.name }}</div>
      <div class="event-topbar-event-info">{{ position.type.show }}</div>
      <div :class="['event-topbar-event-state', eventTopbarEventState]">{{ event.complete.show }}</div>
    </div>
    <component :is="position.type.componentName"></component>
  </div>
</template>

<script>
import EventCommon from '@/components/interface/EventCommon.vue'
import EventFight from '@/components/interface/EventFight.vue'

export default {
  name: 'Event',

  components: {
    EventCommon,
    EventFight
  },

  data() {
    return {
      position: {
        current: 0,
        name: '',
        type: {
          val: '',
          componentName: 'EventCommon',
          show: '',
        }
      },
      event: {
        complete: {
          val: false,
          show: '',
        }
      },
      updateFlag: {
        map: {
          move: 0,
        },
        event: {
          complete: 0,
        }
      }
    }
  },

  computed: {
    renderCount() {
      return this.$store.state.renderCount
    },
    eventTopbarPositionNumber() {
      return {
        'event-topbar-position-number-unfinish': !this.event.complete.val
      }
    },
    eventTopbarEventState() {
      return {
        'event-topbar-event-state-unfinish': !this.event.complete.val
      }
    },
  },

  watch: {
    renderCount() {
      refreshData(this)
    },
    'updateFlag.map.move' (val) {
      if (val) {
        endFight(this)
        updateEvent(this)
      }
    },
    'updateFlag.event.complete' (val) {
      if (val) {
        updateEvent(this)
      }
    }
  },

  mounted() {
    refreshData(this)
    updateEvent(this)
  },
}

let refreshData = (that) => {
  that.position.current = that.$game.data.state.map.position.current
  that.position.name = that.$game.tempData.map.position.name
  that.position.type.val = that.$game.data.state.event.type
  that.event.complete.val = that.$game.tempData.event.complete

  that.updateFlag.map.move = that.$game.tempData.updateFlag.map.move
  that.updateFlag.event.complete = that.$game.tempData.updateFlag.event.complete
}

let updateEvent = (that) => {
  switch (that.position.type.val) {
    case 'common':
      that.position.type.show = '普通事件'
      that.position.type.componentName = 'EventCommon'
      break
    case 'fight':
      that.position.type.show = '战斗事件'
      that.position.type.componentName = 'EventFight'
      break
  }

  that.event.complete.val ? that.event.complete.show = '已完成' : that.event.complete.show = '未完成'
}

let endFight = (that) => {
  that.$game.tempData.state.fight.change = false
  that.$game.tempData.state.search.change = false
  that.$game.tempData.state.recovery.change = false
}
</script>

<style lang="scss">

</style>
